<template>
  <basic-container>
    <div class="beetles-search">
      <div class="search-content" ref="content" :style="{height: searchConceal? 'auto' :'82px'}">
        <slot name="searchForm" :searchConceal="searchConceal"></slot>
      </div>
      <div class="search-button">
        <el-tooltip class="item" effect="dark" :content="expendText" placement="top">
          <i :class="expendIcon" class="search-icon" @click="unfoldIcon"></i>
        </el-tooltip>
        <el-button type="primary" :size="size" @click="searchForm">搜索</el-button>
        <el-button :size="size" @click="emptyForm">清空</el-button>
      </div>
    </div>
  </basic-container>
</template>

<script>
export default {
  name: "beetles-search",
  props: {
    size: {
      type: String,
      default: () => {
        return 'mini';
      }
    },
    expend: {
      type: Boolean,
      default: true
    },
  },
  data() {
    return {
      upIcon: 'el-icon-arrow-down',
      searchIcon: 'el-icon-search',
      emptyIcon: 'el-icon-delete',
      searchConceal: false,
    }
  },
  methods: {
    unfoldIcon() {
      if (this.searchConceal) {
        this.upIcon = 'el-icon-arrow-down'
        this.searchConceal = false
      } else {
        this.upIcon = 'el-icon-arrow-up'
        this.searchConceal = true
      }
    },
    emptyForm() {
      this.$emit('empty-form')
    },
    searchForm() {
      this.$emit('search-form')
    },
  },
  created() {
    this.searchConceal = this.expend;
  },
  computed: {
    expendText() {
      return this.searchConceal ? "收起" : "展开"
    },
    expendIcon() {
      return this.searchConceal ? 'el-icon-arrow-up' : 'el-icon-arrow-down';
    },
  }
}
</script>

<style scoped lang="scss">
/deep/ .el-card__body {
  padding-bottom: 5px;
}

.beetles-search {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}

.search-button {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.search-icon {
  margin-right: 10px;
  font-size: 20px;
  font-weight: 700;

  &:hover {
    color: #00a2ff;
  }
}

.search-content {
  overflow:hidden;
  /deep/ .el-form-item {
    padding-right: 2px;
  }
}
</style>
